<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ru">
<body>
<div th:fragment="users-table" class="columns is-multiline">
    <div class="column is-full">
        <div class="tab-container">
            <table class="table is-striped is-hoverable is-fullwidth is-narrow">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Имя пользователя</th>
                    <th>ФИО</th>
                    <th class="has-text-centered">Дата регистрации</th>
                    <th>Шаг регистрации</th>
                    <th class="has-text-centered">Расширенный доступ</th>
                    <th class="has-text-centered">Действия</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="user,i:${users}"
                    th:data-username="${user.username}"
                    th:data-additional="${!user.additional}">
                    <th th:text="${firstRowNum + i.index + 1}"></th>
                    <td th:text="${user.username}"></td>
                    <td th:text="${user.fio}"></td>
                    <td class="has-text-centered" th:text="${user.createDate}"></td>
                    <td>
                        <span th:replace="~{fragments/component :: stepInfo (${user.step})}"></span>
                    </td>
                    <td class="has-text-centered">
                        <button class="button btn-change-role is-white" th:if="${user.additional}" th:disabled="${user.root}">
                            <span class="icon has-text-success">
                                <ion-icon name="lock-open-sharp"></ion-icon>
                            </span>
                        </button>
                        <button class="button btn-change-role is-white" th:unless="${user.additional}">
                            <span class="icon has-text-danger">
                                <ion-icon name="lock-closed-sharp"></ion-icon>
                            </span>
                        </button>
                    </td>
                    <td class="has-text-centered">
                        <button class="button is-link js-modal-trigger"
                                data-target="modal-ter"
                                data-container="modal-user-container"
                                th:attr="data-url='/user/' + ${user.id}">
                            <span class="icon">
                                <ion-icon name="portrait-solid"></ion-icon>
                            </span>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
            <nav th:if="${totalPages > 1}"
                 th:replace="~{fragments/component :: tablePagination(${totalPages}, ${current}, '/user', '#user-table', '')}"></nav>
            <div id="modal-user-container"></div>
        </div>
    </div>
</div>
</body>
</html>